<template>
  <div
    class="flex justify-center items-center"
    :style="{ width: props.width, height: props.height }"
  >
    <el-switch
      v-model="states.values"
      @change="handleChange"
      :size="states.size"
      :width="states.width"
      :active-text="states.activeText"
      :inactive-text="states.inactiveText"
      :disabled="states.disabled"
      :style="{
        '--el-switch-on-color': states.activeBg,
        '--el-switch-off-color': states.inactiveBg,
      }"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
import { useEventHandle } from "@renderer/utils/componentEvent";
const { handleClickQuery } = useEventHandle();
let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
  id: {
    type: String,
    default: "",
  },
  responseData: {
    type: Object,
    default: () => ({}),
  },
});
let options = ref<any[]>([]);
// watch(
//   () => props.responseData,
//   () => {
//     if (props.responseData) {
//       init();
//     }
//   },
//   {
//     deep: true,
//   }
// );
onMounted(() => {
  // options.value = props.models.data;
});
const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;

const handleChange = (value) => {
  if (!states.value.event.targetComponent.length) return;
  states.value.event.targetComponent.forEach((item) => {
    if (states.value.event.clickType == "query" && item.targetComponentId) {
      handleClickQuery(item.targetComponentId, props.id, { value });
    }
  });
};

const init = () => {
  // options.value = props.responseData as any;
};
</script>

<style scoped lang="scss"></style>
